<template>
  <view class="inventoryMain">
    <u-sticky :enable="enable">
      <view class="inventoryTypeBox flex align-center justify-between">
        <view
          :class="[
            tabCurent == 0
              ? 'item active flex align-center justify-between'
              : 'item flex align-center justify-between',
          ]"
          @tap="tabTap(0)"
        >
          个人库存
          <u-icon
            name="gerenyonghutouxiang2"
            size="50"
            custom-prefix="custom-icon"
          ></u-icon>
        </view>
        <view
          :class="[
            tabCurent == 1
              ? 'item active flex align-center justify-between'
              : 'item flex align-center justify-between',
          ]"
          @tap="tabTap(1)"
        >
          自营库存
          <u-icon
            name="jurassic_users"
            size="50"
            custom-prefix="custom-icon"
          ></u-icon>
        </view>
      </view>
    </u-sticky>
    <view class="terminal">
      <view v-if="terminalList.length > 0">
        <view
          class="listItem"
          v-for="(item, index) in terminalList"
          :key="index"
          @click="inventoryListTab(item)"
        >
          <image :src="item.image" mode="widthFix"></image>
          <view class="center">
            <text>
              {{ item.name }}
            </text>
            <text> x ({{ item.count }}) 台 </text>
          </view>
          <!-- <u-button type="warning" :ripple="true" size="medium" @click="$u.route('/pages/terminalShow/terminalDetail',{name:terminalType,age:12})">查看详情</u-button> -->
          <u-button
            type="warning"
            :ripple="true"
            size="medium"
            @click="inventoryListTab(item)"
            >机具列表</u-button
          >
        </view>
      </view>
      <view class="noMachine" v-if="terminalList.length == 0 && isLoad">
        <image
          src="../../static/images/noData/zwsy.png"
          mode="widthFix"
        ></image>
        <text>暂无库存</text>
      </view>
    </view>
    <u-loadmore
      :status="status"
      @loadmore="loadmore"
      style="padding-bottom: 50rpx"
      v-if="terminalList.length > 0"
    />
    <u-toast ref="uToast" />
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      enable: true,
      tabCurent: 0,
      page: 1,
      pageNumber: 10,
      terminalList: [],
      isLoad: false,
      status: "loadmore",
      noMore: false,
    };
  },
  onLoad() {
    this.getMerchantList();
  },
  onShow() {
    this.enable = true;
  },
  onHide() {
    this.enable = false;
  },
  onPullDownRefresh() {
    this.terminalList = [];
    this.page = 1;
    this.status = "loadmore";
    this.noMore = false;
    this.isLoad = false;
    if (this.tabCurent == 0) {
      this.getMerchantList();
    } else if (this.tabCurent == 1) {
      this.getTeamStockList();
    }
  },
  onReachBottom() {
    if (this.noMore) {
      this.status = "nomore";
    } else {
      this.status = "loading";
      this.page = ++this.page;
      if (this.tabCurent == 0) {
        this.getMerchantList();
      } else if (this.tabCurent == 1) {
        this.getTeamStockList();
      }
    }
  },
  //点击下载更多
  loadmore() {
    if (this.noMore) {
      this.status = "nomore";
    } else {
      this.page = ++this.page;
      this.status = "loadmore";
      if (this.tabCurent == 0) {
        this.getMerchantList();
      } else if (this.tabCurent == 1) {
        this.getTeamStockList();
      }
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    tabTap(index) {
      this.tabCurent = index;
      this.page = 1;
      this.terminalList = [];
      this.isLoad = false;
      this.status = "loadmore";
      this.noMore = false;
      if (index == 0) {
        this.getMerchantList();
      } else if (index == 1) {
        this.getTeamStockList();
      }
    },
    //个人库存
    getMerchantList() {
      this.$u.api
        .stocklist({
          cur_page: this.page,
          pageNumber: this.pageNumber,
        })
        .then((res) => {
          if (res.status == 200) {
            var datas = res.result.list;
            if (this.page == 1 && datas.length == 0) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page == 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length == this.pageNumber) {
              this.status = "loading";
            }
            this.terminalList = this.terminalList.concat(datas);
          }
          this.isLoad = true;
          uni.stopPullDownRefresh();
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },
    //自营库存
    getTeamStockList() {
      this.$u.api
        .teamStockList({
          cur_page: this.page,
          pageNumber: this.pageNumber,
        })
        .then((res) => {
          if (res.status == 200) {
            var datas = res.result.list;
            if (this.page == 1 && datas.length == 0) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page == 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length == this.pageNumber) {
              this.status = "loading";
            }
            this.terminalList = this.terminalList.concat(datas);
          }
          this.isLoad = true;
          uni.stopPullDownRefresh();
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },
    inventoryListTab(item) {
      if (item.count == 0) {
        this.$refs.uToast.show({
          title: "暂无台数",
          type: "error",
        });
      } else {
        item.tabCurent = this.tabCurent;
        this.$u.route({
          url: "/pages/kucun/kucunList",
          params: item,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}

.headImg {
  image {
    margin-top: -20rpx;
    width: 100%;
    // 去除图片空白
    vertical-align: middle;
  }

  text {
    position: absolute;
    top: 60rpx;
    left: 100rpx;
    letter-spacing: 3rpx;
    color: #fff;
    font-size: 48rpx;
    font-weight: 700;
  }
}

.terminal {
  position: relative;
  z-index: 9;
  padding: 0 30rpx 30rpx;
  background-color: #fff;

  .listItem {
    position: relative;
    padding: 20rpx 30rpx;
    border-radius: 10rpx;
    box-shadow: 0 0 16rpx rgb(218, 218, 218);
    margin-bottom: 40rpx;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .center {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      & > :last-child {
        padding-top: 40rpx;
        color: #e54d42;
      }
    }

    image {
      width: 160rpx;
      height: 160rpx;
      border: 1rpx solid #ff9900;
      border-radius: 10rpx;
    }

    view {
      padding: 10rpx 0 10rpx 20rpx;
      width: 300rpx;
    }

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 10rpx;
      background-color: #fc6306;
    }
  }

  button {
    width: 100rpx;
    margin-right: 0;
  }
}

.hotTerminal {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 120rpx;
  line-height: 120rpx;
  display: flex;

  & > button {
    width: 90%;
    background-color: #fb4535;
    border-radius: 14rpx;
  }
}
.inventoryTypeBox {
  padding: 30rpx;
  background: #fff;
  .item {
    padding: 30rpx;
    background: #f1f1f1;
    border-radius: 8rpx;
    position: relative;
    width: 48%;
    font-weight: bold;
    font-size: 36rpx;
    color: #666;
    &.active {
      background: #fb4535;
      color: #fff;
    }
  }
}
</style>
